<%@page contentType="text/html;charset=utf-8" isELIgnored="false" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>
    <title>添加好友</title>
    <link rel="icon" href="../favicon.ico" type="image/ico">
    <link href="${base}/css/bootstrap.min.css" rel="stylesheet">
    <link href="${base}/css/materialdesignicons.min.css" rel="stylesheet">
    <link href="${base}/css/style.min.css" rel="stylesheet">
    <link href="${base}/css/animate.css" rel="stylesheet">
    <style>
        #box {
            z-index:100;
            position: fixed;
            padding: 20px;
            width: 600px;
            height: 400px;
            background-color: white;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            border-radius: 4px;
            box-shadow: 2px 2px 4px rgba(2, 2, 2, .5);
        }

        img{
            width: 50px;
            height: 50px;
            border-radius: 50px;
        }
    </style>
</head>

<body>
<div class="topbar" style="background-color: deepskyblue;opacity: 0.5">
    <div class="topbar-left">
        <div class="lyear-aside-toggler">
        </div>
        <span class="navbar-page-title" style="margin-left: 80px"> <h3 style="color: black">添加好友</h3> </span>
    </div>
    <ul class="topbar-right">
        <li class="dropdown dropdown-profile">
                <img style="display: inline-block" class="img-avatar img-avatar-48 m-r-10" src="${base}/upload/${theUser.headpic}" />
                <span style="color: crimson">${theUser.name}</span>
                <a style="display: inline-block;color: black" href="${base}/toHome">回到首页</a>
        </li>
    </ul>
</div>
<div class="container-fluid"  >

    <div class="row"  >

        <div class="col-lg-12" style="background-image: url(${base}/img/444.jpg);background-size: 120%"  >

            <div class="card" style="width: 1200px;height: 800px;margin-left:auto;margin-right:auto;opacity: 0.9"  >

                <div>
                    <form method="get" action="${base}/friends/selectFriends">
                        <div class="input-group">
                            <input type="text" class="form-control" value="" name="likes" placeholder="请输入电话或者名字"
                                   style="width: 230px;margin-top: 20px;margin-left: 25px; ">
                            <button class="btn btn-cyan btn-w-md" type="submit" style="margin-top: 20px;width: 100px"
                            >搜索
                            </button>
                            <input type="hidden" name="search_field" id="search-field" value="title">
                        </div>
                    </form>
                </div>
                <div id="box" hidden>
                    <h3 style="color: coral">申请列表</h3>
                    <p align="right">
                        <button onclick="box.hidden = true">x</button>
                    </p>
                    <table width="480px"   cellspacing="10" cellpadding="10">
                        <tr>
                            <td>头像</td>
                            <td>姓名</td>
                            <td width="40px">性别</td>
                            <td>备注</td>
                            <td>时间</td>
                            <td>操作</td>
                        </tr>
                        <c:forEach var="i" items="${ap.list}">
                            <tr>
                                <td><img src="${base}/upload/${i.user.headpic}"></td>
                                <td>${i.user.name}</td>
                                <td width="40px">${i.user.sex eq 1?"男":"女"}</td>
                                <td>${i.contents}</td>
                                <td><fmt:formatDate value="${i.createtime}" pattern="yy-MM-dd HH:mm:ss"/></td>
                                <td>
                                    <a class="btn btn-sm btn-primary"
                                       href="${base}/friends/acceptFr?sendid=${i.sendid}">接收</a>
                                    <a class="btn btn-sm btn-primary"
                                       href="${base}/application/deleteapp?sendid=${i.sendid}">拒绝</a>
                                </td>
                            </tr>
                        </c:forEach>
                    </table>
                    </p>
                </div>
                <div class="card-toolbar clearfix">
                    <div class="toolbar-btn-action">
                        <a class="btn btn-primary m-r-5" onclick="box.hidden = false">申请列表</a>
                        <a class="btn btn-primary m-r-5" href="${base}/friends/selectAllfs"></i>我的好友</a>
                        <a class="btn btn-danger" href="${base}/friends/selecthmd">我的黑名单</a>
                    </div>
                </div>

                <div class="card-body">

                    <div class="table-responsive">
                        <form action="" method="post" id="formss">
                          <table class="table table-bordered">
                            <thead>
                            <tr>
                              <th>
                                <label class="lyear-checkbox checkbox-primary">
                                  <input type="checkbox" id="check-all"><span></span>
                                </label>
                              </th>
                              <th>头像</th>
                              <th>用户名</th>
                              <th>姓名</th>
                              <th>手机</th>
                              <th>性别</th>
                              <th>状态</th>
                              <th>操作</th>
                            </tr>
                            </thead>
                            <tbody>
                            <c:forEach var="f" items="${p.list}">
                              <tr>
                                <td>
                                  <label class="lyear-checkbox checkbox-primary">
                                    <input type="checkbox" name="ckss" value="1"><span></span>
                                  </label>
                                </td>
                                <td><img src="${base}/upload/${f.headpic}" alt=""></td>
                                <td>${f.account}</td>
                                <td>${f.name}</td>
                                <td>${f.phone}</td>
                                <td>${f.sex eq 1?"男":"女"}</td>
                                <td><font class="text-success">陌生人</font></td>
                                <td>
                                    <div id="${f.id}" hidden style="z-index:100;position: fixed;padding: 20px;width: 300px;
                                        height: 200px;background-color: white;left: 50%;top: 50%;transform: translate(-50%, -50%);
                                            border-radius: 4px;box-shadow: 2px 2px 4px rgba(2, 2, 2, .5);">
                                       <p><h3>发送申请给：${f.name}</h3></p>
                                        <p>内容： <input type="text" name="contents" style="border: 1px solid black"></p>
                                        <p><a onclick="(function() {
                                                lightyear.loading('show');
                                                setTimeout(function () {
                                                lightyear.loading('hide');
                                                lightyear.notify('申请已发送~', 'success', 1000);
                                                }, 0)
                                                setTimeout(function() {
                                                $('#formss').attr('action','${base}/application/addapp?acceptid=${f.id}');
                                                $('#formss').submit();
                                                },500)
                                                })()">发送</a> <a onclick="(function() {
                                                var id = document.getElementById('${f.id}');
                                                id.hidden = true;
                                                })()">取消</a></p>
                                    </div>
                                  <div class="btn-group">
                                    <a class="btn btn-w-md btn-round btn-success" id="example-success-notify"
                                        onclick="(function() {
                                                var id = document.getElementById('${f.id}');
                                                id.hidden = false;
                                        })()"
                                    >发送申请</a>
                                      <a class="btn btn-w-md btn-round btn-warning"
                                         onclick="(function() {
                                                 lightyear.loading('show');
                                                 setTimeout(function () {
                                                 lightyear.loading('hide');
                                                 lightyear.notify('已拉黑~', 'success', 1000);
                                                 }, 0)
                                                 setTimeout(function() {
                                                 $('#formss').attr('action','${base}/friends/lahei?acceptid=${f.id}');
                                                 $('#formss').submit();
                                                 },500)
                                                 })()">拉入黑名单</a>
                                  </div>
                                </td>
                              </tr>
                            </c:forEach>
                            </tbody>
                          </table>
                        </form>
                    </div>
                    <ul class="pagination">
                        <li><a href="${base}/friends/selectFriends?pageNum=1&likes=${likes}">«</a></li>
                        <li><a href="${base}/friends/selectFriends?pageNum=${p.prePage}&likes=${likes}">上一页</a></li>
                        <c:forEach var="i" items="${p.navigatepageNums}">
                            <li <c:if test="${i eq p.pageNum}">class="active"</c:if>><a
                                    href="${base}/friends/selectFriends?pageNum=${i}&likes=${likes}">${i}</a></li>
                        </c:forEach>
                        <li><a href="${base}/friends/selectFriends?pageNum=${p.nextPage}&likes=${likes}">下一页</a></li>
                        <li><a href="${base}/friends/selectFriends?pageNum=${p.pages}&likes=${likes}">»</a></li>
                    </ul>

                </div>
            </div>
        </div>

    </div>

</div>

<script type="text/javascript" src="${base}/js/jquery.min.js"></script>
<script type="text/javascript" src="${base}/js/bootstrap.min.js"></script>
<script type="text/javascript" src="${base}/js/perfect-scrollbar.min.js"></script>
<script type="text/javascript" src="${base}/js/main.min.js"></script>

<script src="${base}/js/bootstrap-notify.min.js"></script>
<script type="text/javascript" src="${base}/js/lightyear.js"></script>
<script type="text/javascript" src="${base}/js/main.min.js"></script>
<script type="text/javascript">
    $(function () {
        $('.search-bar .dropdown-menu a').click(function () {
            var field = $(this).data('field') || '';
            $('#search-field').val(field);
            $('#search-btn').html($(this).text() + ' <span class="caret"></span>');
        });
    });
    document.onclick = function (event) {
        if (!box.contains(event.target) && mybtn != event.target) {
            box.hidden = true;
        }
    }
    // function openbox1() {
    //     var modal = document.getElementById('box1');
    //     modal.hidden = false;
    // }
    // function closebox1() {
    //     var modal = document.getElementById('box1');
    //     modal.hidden = true;

    // }
</script>
</body>
</html>